<template>
  <div class="fileLink">
    <el-dialog title="输入链接信息" :visible.sync="show" width="30%" @close="handelclose">
      <div class="fileData">
        文件名：
        <el-input
          v-model="fileName"
          placeholder="请输入文件名"
          size="small"
        ></el-input>
      </div>
      <div class="fileData">
        文件链接：
        <el-input
          v-model="url"
          placeholder="请输入文件完整链接(例http://www.baidu.com)"
          size="small"
        ></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="show = show">取 消</el-button>
        <el-button type="primary" @click="handleConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      fileName: "",
      url: "",
    };
  },
  props: {
    uploadData: Object,
    fileLInkShow: Boolean,
  },
  watch: {
    fileLInkShow(n) {
      this.show = n;
    },
    show(n) {
      if (!n) this.handelclose()
    }
  },
  methods: {
    handleConfirm() {
      const data = this.uploadData
      if (!this.url) {
        return this.$antdMessage.warning({
          content: '请输入文件完整链接!'
        })
      }
      let obj = {
        fileName: this.fileName ? this.fileName : this.url,
        fileUrl: this.url,
        isDir: false,
      }
      obj.type = obj.fileUrl.substring(obj.fileUrl.lastIndexOf(".") + 1)
      data.filePaths.push(obj)
      this.$emit("uploadDataChange", {
        data: {
          baseFileUrl: data.baseFileUrl,
          filePaths: data.filePaths,
        },
        isEncoded: data.isEncoded,
      })
      this.show = false
    },
    // 关闭浏览窗口
    handelclose() {
      this.$emit("handelcloseFileLink");
    },
  },
};
</script>

<style lang="stylus">
.fileLink {
  .fileData {
    margin-bottom: 20px
    display: flex;
    align-items: center;
    justify-content: space-between
    .el-input {
      max-width: 80%
    }
  }
}
</style>